<template>
    <div>
            <div class="container">
                <div>
                    <wxc-minibar title="聊天消息"
                                 background-color="#009ff0"
                                 text-color="#FFFFFF"
                                 right-text="更多+"
                                 left-button=""
                                 @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                                 @wxcMinibarRightButtonClicked="toggle"></wxc-minibar>
                </div>
            </div>
        <scroller class="chat-news" >
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">正在de 刷新...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
            <div class="chat-news-list" @click=" friendChat(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text class="news">熊二</text>
                    <text class="news" style="height:80px;">熊二：话费很多很多</text>
                </div>
            </div>
        </scroller>
        <div class="active" v-if="show">
            <div class="demo-title" if="shown" @click="extendqun(event)">
                <text class="title" style="color: white">创建群</text>
            </div>
            <div class="demo-title" if="shown" @click="addqun(event)">
                <text class="title" style="color: white">加入群聊</text>
            </div>
            <div class="demo-title" if="shown" @click=" addfriend(event)">
                <text class="title" style="color: white">添加好友</text>
            </div>
        </div>
        <div class="alret-model" v-if="appeaer">
            <text class="alret-text" style="text-align: center">创建群</text>
            <text class="alret-text-x">
                <text>请输入群名：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
           <text class="alret-text-t">
               <!--<text style="margin-left: -80px;color: green">确定</text>-->
               <wxc-button class="btn" text="确定"
                           type="normal"
                           @wxcButtonClicked=""></wxc-button>
               <wxc-button class="btn" text="取消"
                           type="red"
                           @wxcButtonClicked="wxcButtonClicked"></wxc-button>
           </text>
        </div>
        <div class="alret-model" v-if="qunId">
            <text class="alret-text" style="text-align: center">加入群</text>
            <text class="alret-text-x">
                <text>请输入群ID：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <!--<text style="margin-left: -80px;color: green">确定</text>-->
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked="concel(event)"></wxc-button>
            </text>
        </div>
        <div class="alret-model" v-if="friendId">
            <text class="alret-text" style="text-align: center">添加好友</text>
            <text class="alret-text-x">
                <text>请输入好友ID：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked="concel(event)"></wxc-button>
            </text>
        </div>
        <!--===========================================================================-->
    </div>
</template>
<script>
    import { WxcMinibar } from 'weex-ui';
    import { WxcMask } from 'weex-ui';
    import { WxcButton } from 'weex-ui'
    var navigator = weex.requireModule('navigator');
    var modal = weex.requireModule('modal')
    export default {
        components: { WxcMinibar,WxcMask,WxcButton},
        data:()=> ({
            show: false,
            isFalse: false,
            overlayCanClose: true,
            hasAnimation: true,
            appeaer:false,
            qunId:false,
            friendId:false,
            refreshing: false,
        }),
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {

            },
            friendChat(event){
                navigator.push({
                    url: 'http://192.168.3.157:8081/dist/friendChat.js',
                    animated: "true"
                }, event => {
                    // modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
                })
            },
            toggle() {
                this.show = !this.show;
            },
            qqq(){
                var bundleUrl = this.$getConfig().bundleUrl;
                bundleUrl = new String(bundleUrl);
                var nativeBase;
                var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

                var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
                if (isAndroidAssets) {
                    nativeBase = 'file://assets/dist/';
                }
                else if (isiOSAssets) {
                    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                }
                else {
                    var host = 'localhost:8081';
                    var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
                    if (matches && matches.length >= 2) {
                        host = matches[1];
                    }
                    nativeBase = 'http://' + host + '/dist/';
                }
                this.baseURL = nativeBase;
            },
            /*处理*/
            friendChat(event) {
                this.qqq();
                navigator.push({
                    url: this.baseURL+'friendChat.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            wxcButtonClicked (e) {
                this.appeaer=!this.appeaer;
            },
            extendqun(event){
                this.show=false;
                this.appeaer=true;
            },
            addqun(event){
                this.show=false;
                this.qunId=true;
            },
            addfriend(event){
                this.show=false;
                this.friendId=true;
            },
            concel(event){
                this.appeaer=false;
                this.qunId=false;
                this.friendId=false;
            },
            onrefresh (event) {
                // modal.toast({ message: '正在刷新', duration: 1 })
                this.refreshing = true
                setTimeout(() => {
                    this.refreshing = false
                }, 2000)
            },
        }
    };
</script>
<style>
    .chat-news{
        width:750px;
        min-height:1000px;
    }
    .chat-news-list{
        width:750px;
        min-height:160px;
        border-width: 1px;
        border-color: #f9f9f9;
        z-index:1;

    }
    .img{
        width: 160px;
        height: 160px;
    }
    .new_text{
        width:570px;
        height: 160px;
        margin-top: -160px;
        margin-left: 180px;
        color:white !important;
    }
    .news{
        height: 80px;
        width:570px;
        display: flex;
        justify-content: left;
        align-items:center;
        margin-top: 10px;
        /*overflow: hidden;*/
        lines:1;
    }
    .active{
        width: 300px;
        height: 303px;
        position:absolute;
        top:90px;
        z-index: 999;
        left:448px;
        color:white !important;
    }
    .demo-title{
        width:300px;
        height: 100px;
        border-color: #fafafa;
        border-width: 2px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction:row;
        justify-content:center;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        align-items: center;
        border-bottom-width:0px;
        color:white !important;
        background-color: rgba(28, 29, 13, 0.85);
    }
    .alret-model{
        width:500px;
        height: 400px;
        border-color:rgb(255, 80, 0);
        border-width: 2px;
        position: absolute;
        top:250px;
        left:125px;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        z-index: 9999;
        background-color:#FFDEAF;
    }
    .alret-text{
        width: 450px;
        height:100px;
        left:25px;
        justify-content: center;
        align-items: center;
        display: flex;
        display: -webkit-flex;
    }
    .alret-text-x{
        width: 450px;
        height:110px;
        left:46px;
        justify-content:left;
        flex-direction: column;
        display: flex;
        display: -webkit-flex;
    }
    .alret-text-t{
        width: 450px;
        height:110px;
        left:25px;
        justify-content:center;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        align-items: center;
        margin-top: 50px;
    }
    .btn{
        width: 200px;
        height: 100px;
        border-radius: 10px;
        margin-left: 20px;
    }
    .refresh {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
</style>